import 'package:ati_package/core/routes/app_routes.dart';
import 'package:ati_package/core/utils/ati_assets.dart';
import 'package:ati_package/pages/common/ati_scaffold.dart';
import 'package:flutter/material.dart';
import 'package:flutter_form_builder/flutter_form_builder.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:qr_flutter/qr_flutter.dart';

import '../../../../core/utils/ati_color.dart';
import '../../../../core/utils/ati_enum.dart';
import '../../../../core/utils/ati_font.dart';
import '../../../common/widgets/ati_common_btn.dart';
import '../../../common/widgets/ati_text_input.dart';
import 'wallect_image_upload.dart';

class WallectRechargeView extends StatefulWidget {
  const WallectRechargeView({super.key});

  @override
  State<WallectRechargeView> createState() => _WallectRechargeViewState();
}

class _WallectRechargeViewState extends State<WallectRechargeView> {
  final _formKey = GlobalKey<FormBuilderState>();

  @override
  Widget build(BuildContext context) {
    return AtiScaffold(
      title: '充值',
      rigthTitle: '充值记录',
      rigthOnTap: () => Get.toNamed(AtiAppRoutes.userWalletRechargeRecord),
      extendBodyBehindAppBar: true,
      barBgColor: Colors.transparent,
      titleColor: Colors.white,
      body: Stack(children: [buildBgImage(), _buildContextWidgets()]),
    );
  }

  Widget buildBgImage() {
    return Container(
      height: 225.r,
      width: Get.width,
      decoration: BoxDecoration(
        image: DecorationImage(
          image: AssetImage(AtiAssets.userWalltBg, package: 'ati_package'),
          fit: BoxFit.fitWidth,
        ),
      ),
    );
  }

  _buildContextWidgets() {
    return SafeArea(
      bottom: false,
      child: SingleChildScrollView(
        child: Container(
          margin: EdgeInsets.only(top: 5.r, left: 16.r, right: 16.r),
          child: Column(
            children: [
              buildHeaderWidgets(),
              _buildTextInput(),
              _buildUsdtCode(),
              _buildVoucherWidgets(),
              _buildTapAndfootBtn(),
            ],
          ),
        ),
      ),
    );
  }

  //我的积分
  Widget buildHeaderWidgets() {
    return Container(
      padding: EdgeInsets.only(top: 12.5.w, left: 0.r, bottom: 10.r),
      decoration: BoxDecoration(borderRadius: BorderRadius.circular(0.r)),
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(
                '当前余额(USDT)',
                style: TextStyle(
                  fontSize: 12.sp,
                  color: AtiColor.textHLColor1,
                  fontWeight: FontWeight.w500,
                ),
              ),
              SizedBox(height: 5.h),
              Text(
                '29166.00',
                style: TextStyle(
                  fontSize: 30.sp,
                  color: AtiColor.textHLColor1,
                  fontWeight: FontWeight.w600,
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }

  _buildTextInput() {
    return Container(
      padding: EdgeInsets.only(top: 0.r),
      child: FormBuilder(
        key: _formKey,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            AtiTextInput(
              name: 'oldPassword',
              padding: EdgeInsets.only(
                top: 10.r,
                left: 16.r,
                right: 10.r,
                bottom: 7.5.r,
              ),
              label: '姓名',
              hint: '请输入姓名',
              showClearButton: true,
              bgColor: Colors.white,
              prefixLabel: AtiAssets.userUsdtIcon,
              suffixLabel: 'USDT',
              showPrefixIcon: true,
              showPrefixType: true,
              showBorder: false,
              validator: (val) => val == null || val.isEmpty ? '请输入姓名' : null,
            ),
            SizedBox(height: 5.r),
            AtiTextInput(
              name: 'newPassword',
              label: '提币网络',
              hint: '请选择提币网络',
              showClearButton: true,
              inputType: AtiInputType.select,
              validator: (val) => val == null || val.isEmpty ? '请选择提币网络' : null,
              onTap: () async {},
            ),
          ],
        ),
      ),
    );
  }

  _buildUsdtCode() {
    return Container(
      padding: EdgeInsets.only(top: 16.r, bottom: 12.r, left: 7.r, right: 16.r),
      margin: EdgeInsets.only(bottom: 12.r, top: 5.r),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(8.r),
      ),

      child: Column(
        mainAxisAlignment: MainAxisAlignment.start,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          QrImageView(
            data: 'https://example.com/user/12345',
            version: QrVersions.auto,
            size: 100.r,
            backgroundColor: Colors.white,
            eyeStyle: const QrEyeStyle(
              eyeShape: QrEyeShape.square, // 👈 改成方形，视觉更规整
              color: Colors.black,
            ),
            dataModuleStyle: const QrDataModuleStyle(
              dataModuleShape: QrDataModuleShape.square, // 👈 与眼形保持一致
              color: Colors.black,
            ),
          ),
          Container(
            padding: EdgeInsets.symmetric(horizontal: 10.r, vertical: 12.5),
            decoration: BoxDecoration(
              color: Color(0xFFECFFF9),
              borderRadius: BorderRadius.circular(8.r),
            ),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Row(
                  children: [
                    Text(
                      '钱包地址',
                      style: TextStyle(
                        fontSize: AtiFont.font12,
                        color: Color(0xFF666666),
                        fontWeight: FontWeight.w500,
                      ),
                    ),
                    Spacer(),
                    Image.asset(
                      width: 22.5.r,
                      AtiAssets.atiCopyIcon,
                      package: 'ati_package',
                    ),
                  ],
                ),
                SizedBox(height: 2.5),
                Text(
                  'T9z2kvNgUNTxBdvFsqecMUwoJkriGEN5Fh',
                  style: TextStyle(
                    fontSize: AtiFont.font12,
                    color: AtiColor.textColor1,
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }

  _buildVoucherWidgets() {
    return AtiImageUploadBox(
      label: '上传支付凭证',
      onChanged: (file) {
        print('选择的图片：${file?.path}');
      },
    );
  }

  _buildTapAndfootBtn() {
    return Container(
      margin: EdgeInsets.symmetric(horizontal: 16.r, vertical: 15.r),

      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(
            '温馨提示',
            style: TextStyle(
              color: Color(0xFF666666),
              fontSize: AtiFont.font12,
            ),
          ),
          SizedBox(height: 2.5.r),
          Text(
            ' 1、向该地址充值后，资金直接入账户余额;\n2、请勿向上述地址充值任何非ERC20和TRC20协议;\n3、具体到账金额以实际到账金额为准;',
            style: TextStyle(
              color: Color(0xFF666666),
              fontSize: AtiFont.font12,
            ),
          ),

          AtiCommonBtn(
            onPressed: () {},
            titleStr: '充值',
            margin: EdgeInsets.symmetric(horizontal: 10.r, vertical: 32.r),
          ),
        ],
      ),
    );
  }
}
